<template>
  <div class="cart-item">
    <div class="goods-checkbox">	
      <el-checkbox v-model="newState"></el-checkbox>
    </div>
    <div class="goods-image">
				<img :src="item.image">
		</div>
		<div class="goods-info">
			<div class="goods-title">{{item.title}}</div>
			<div class="goods-desc">{{item.desc}}</div>
			<div class="goods-price">{{item.price}}</div>
		</div>
    
	</div>
</template>

<script>
export default {
  name:"cartListItem",
  props: {
    item: {
      type: Object,
      default(){
        return {}
      }
    }
  },
  data () {
    return {
      newState: false
    }
  },
  watch: {
    newState(newValue, oldValue) {
      console.log(this.item.iid)
      const id = this.item.iid
      this.$store.state.cartList.forEach(e => {
        if (e.iid === id) {
          e.statezzz = newValue
        }
      })
    }
  }
}
</script>

<style scoped>

.cart-item {
  display: flex;
}

.goods-image img{
	width: 7em;
	height: 7em;
  border-radius: 10%;
}

.goods-title {
	overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  font-size: 20px;
  font-weight: 600;
}

.goods-desc {
	overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  font-size: 15px;
  font-weight: 500;
  padding-top: 1em;
}

.goods-checkbox{
  height: 7em;
  line-height: 7em;
}

.goods-price{
  padding-top: 1em;
  font-weight: 800;
  color: #ff0066
}

.goods-checkbox{
  margin-left: 0.5em;
  margin-right: 0.5em;
}

</style>